import {
  ArrowLeftIcon,
  ArrowRightIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from '@chakra-ui/icons';
import {
  Flex,
  IconButton,
  NumberDecrementStepper,
  NumberIncrementStepper,
  NumberInput,
  NumberInputField,
  NumberInputStepper,
  Select,
  Text,
} from '@chakra-ui/react';
import { Table as ReactTable } from '@tanstack/react-table';

interface PaginationProps<T> {
  table: ReactTable<T>;
}
export default function Pagination<T>({ table }: PaginationProps<T>) {
  const buttonStyle = {
    h: '2rem',
    variant: 'ghost',
    fontSize: 'sm',
    color: 'base.200',
    bg: 'base.850',
    _hover: {
      bg: 'base.800',
    },
    _disabled: {
      bg: 'base.850',
      color: 'base.800',
      _hover: {
        cursor: 'not-allowed',
      },
    },
  };
  return (
    <Flex
      m={4}
      align="center"
      direction={{ base: 'column', md: 'row' }}
      gap={{ base: 4, sm: 2, md: 3, lg: 8, xl: 10, '2xl': 20 }}
    >
      <Flex>
        <IconButton
          sx={buttonStyle}
          aria-label="First Page"
          onClick={() => table.setPageIndex(0)}
          isDisabled={!table.getCanPreviousPage()}
          icon={<ArrowLeftIcon h={3} w={3} />}
          mr={3}
        />
        <IconButton
          sx={buttonStyle}
          aria-label="Previous Page"
          onClick={() => table.previousPage()}
          isDisabled={!table.getCanPreviousPage()}
          icon={<ChevronLeftIcon h={6} w={6} />}
        />
      </Flex>
      <Flex px="3" align="center" gap="4">
        <Flex flexShrink="0">
          <Text fontWeight="bold" as="span">
            {table.getState().pagination.pageIndex + 1}
          </Text>{' '}
          /{' '}
          <Text fontWeight="bold" as="span">
            {table.getPageCount()}
          </Text>
        </Flex>
        <Flex align="center">
          <Text flexShrink="0" mr="1">
            到第
          </Text>
          <NumberInput
            w={12}
            min={1}
            max={table.getPageCount()}
            onChange={(value) => {
              const page = value ? Number(value) - 1 : 0;
              table.setPageIndex(page);
            }}
            defaultValue={table.getState().pagination.pageIndex + 1}
          >
            <NumberInputField />
            <NumberInputStepper>
              <NumberIncrementStepper />
              <NumberDecrementStepper />
            </NumberInputStepper>
          </NumberInput>
          <Text flexShrink="0" ml="1">
            页
          </Text>
        </Flex>
        <Select
          w={24}
          value={table.getState().pagination.pageSize}
          onChange={(e) => {
            table.setPageSize(Number(e.target.value));
          }}
        >
          {[10, 20, 30, 40].map((pageSize) => (
            <option key={pageSize} value={pageSize}>
              每页 {pageSize} 条
            </option>
          ))}
        </Select>
      </Flex>
      <Flex>
        <IconButton
          sx={buttonStyle}
          aria-label="Next Page"
          onClick={() => table.nextPage()}
          isDisabled={!table.getCanNextPage()}
          icon={<ChevronRightIcon h={6} w={6} />}
        />
        <IconButton
          sx={buttonStyle}
          aria-label="Last Page"
          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
          isDisabled={!table.getCanNextPage()}
          icon={<ArrowRightIcon h={3} w={3} />}
          ml={3}
        />
      </Flex>
    </Flex>
  );
}
